<template>
  <div class="searchResult" @mousewheel="scrollHight">
    <van-icon
      v-if="scrollBol"
      name="arrow-up"
      color="#f1f2f1"
      class="toUp"
      @click="scrollToUp"
    />
    <!-- 头部标题 -->
    <van-nav-bar
      left-arrow
      class="mynav"
      title="搜索结果"
      :fixed="true"
      @click-left="onClickLeft"
    />
    <!-- 文章列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的"
      @load="onLoad"
    >
      <van-cell
        @click="$router.push('/detail/' + item.art_id)"
        v-for="(item, index) in artList"
        :key="index"
      >
        <template #title>
          <!-- 文章的标题 -->
          <h3>{{ item.title }}</h3>
          <!-- 文章的图片 -->
          <van-grid
            v-if="item.cover.type !== 0"
            :border="false"
            :column-num="3"
          >
            <van-grid-item
              v-for="(imgitem, imgindex) in item.cover.images"
              :key="imgindex"
            >
              <van-image lazy-load :src="imgitem" />
            </van-grid-item>
          </van-grid>
          <!-- 文章的其它信息 -->
          <div class="otherbox">
            <div class="left">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }} 条评论</span>
              <span>{{ item.pubdate | fromtime }}</span>
            </div>
          </div>
          <!-- 其它按钮 -->
          <van-grid :column-num="3" direction="horizontal">
            <van-grid-item
              @click="comment"
              icon="comment-o"
              :text="item.comm_count.toString()"
            />
            <van-grid-item
              @click="zan"
              icon="like-o"
              :text="item.like_count.toString()"
            />
            <van-grid-item @click="share" icon="exchange" text="分享" />
          </van-grid>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { apiGetSearch } from '@/api/other.js'
import { localGet } from '../../utils/mylocal'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      // 搜索的关键字
      key: this.$route.params.key,
      // 页数
      page: 1,
      // 页容量
      perpage: 10,
      // 文章的数组
      artList: [],
      scrollBol: false
    }
  },
  methods: {
    scrollHight () {
      console.log(1)
      if (window.pageYOffset > 1000) {
        this.scrollBol = true
      } else if (window.pageYOffset <= 1000) {
        this.scrollBol = false
      }
    },
    scrollToUp () {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
      this.scrollBol = false
    },
    share () {
      // 登录判断
      if (!this.$login()) {
        // 未登录
        return
      }
      console.log('分享')
    },
    zan () {
      // 判断用户是否登录
      if (!this.$login()) {
        // 说明未登录，不需要执行后续代码
        return
      }
      console.log('点赞')
    },
    comment () {
      // 登录的判断
      // 得到登录的 token
      var token = localGet('token')
      if (!token || !token.token) {
        // 提示用户未登录
        this.$toast.fail('对不起，您还没有登录')
        // 跳转到登录页面
        this.$router.push('/login')
        // 说明用户没有登录
        return // 结束后续代码的执行
      }
      // 完成评论操作
      console.log('完成评论')
    },
    onClickLeft () {
      // 回退到上一个页面
      // this.$router.back()
      this.$router.go(-1)
    },
    async onLoad () {
      // 发送请求到服务器得到关键字对应的文章数据
      const res = await apiGetSearch({
        page: this.page,
        perpage: this.perpage,
        q: this.key
      })
      this.artList = [...this.artList, ...res.data.data.results]
      console.log(this.artList)
      // 将 loading 改为 false
      this.loading = false
      // 将页码 ++
      this.page++
      // 判断返回数据的长度
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.searchResult {
  position: relative;
  .van-icon.toUp {
    position: fixed;
    right: 10px;
    bottom: 80px;
    background-color: #b7edf9;
    z-index: 999;
  }
  margin-top: 46px;
  .mynav {
    background-color: #3e9df8;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  /deep/ i.van-icon.van-icon-arrow-left.van-nav-bar__arrow {
    color: #fff;
  }
  .otherbox {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    .left {
      span {
        margin-right: 15px;
      }
    }
    .right {
      border: 1px solid #999;
      width: 24px;
      height: 18px;
      text-align: center;
      line-height: 24px;
    }
  }
}
</style>
